<template>
  <div class="h-screen w-screen bg-gray-100 relative overflow-hidden">
    <!-- 背景图 -->
    <div class="background-image"></div>

    <!-- 顶部导航（Logo + 语言切换） -->
    <div class="header-container">
      <div class="amazon-logo">
        <img :src="logoUrl" alt="Company Logo" />
      </div>
      <span class="text-amazon-dark font-bold text-xl text-shadow-[0_1px_2px_rgba(255,255,255,0.8)]"
        >EAST POINT</span
      >

      <!-- 语言切换下拉菜单 -->
      <div class="dropdown relative">
        <div
          class="flex items-center space-x-1 focus:outline-none text-gray-700"
          @mouseenter="isLangDropdownOpen = true"
          @mouseleave="isLangDropdownOpen = false"
        >
          <img :src="currentLang.icon" :alt="currentLang.text" class="w-5 h-5 object-contain" />
          <span>{{ currentLang.text }}</span>
          <i class="fa-solid fa-chevron-down text-xs"></i>
        </div>
        <div
          class="dropdown-content"
          :class="{ block: isLangDropdownOpen, hidden: !isLangDropdownOpen }"
          @mouseenter="isLangDropdownOpen = true"
          @mouseleave="isLangDropdownOpen = false"
        >
          <a
            href="#"
            v-for="lang in langList"
            :key="lang.lang"
            @click.prevent="switchLang(lang)"
            class="flex items-center space-x-2 lang-item"
          >
            <img :src="lang.icon" :alt="lang.text" class="w-5 h-5 object-contain" />
            <span>{{ lang.text }}</span>
          </a>
        </div>
      </div>
    </div>

    <!-- 登录容器 -->
    <div class="login-container">
      <div class="p-6">
        <div class="text-left mb-2">
          <h2 class="text-2xl font-bold text-gray-800" style="margin-top: -40px">欢迎登录</h2>
        </div>

        <!-- 登录方式切换 -->
        <!-- <div class="flex justify-start mb-10 border-b border-gray-200 pl-4">
          <div
            class="py-2 px-6 text-lg font-bold text-black border-b-2 border-transparent focus:outline-none transition-all duration-200"
            :class="{
              'text-black border-b-2 border-black': activeTab === 'password',
                'text-gray-300 hover:text-black': activeTab !== 'password'
            }"
            @click="activeTab = 'password'"
          >
            密码登录
          </div>
          <div
            class="py-2 px-6 text-lg font-bold text-gray-300 hover:text-black border-b-2 border-transparent focus:outline-none transition-all duration-200"
            :class="{
              'text-black border-b-2 border-black': activeTab === 'sms',
              'text-gray-300 hover:text-black': activeTab !== 'sms'
            }"
            @click="activeTab = 'sms'"
          >
            验证码登录
          </div>
        </div> -->
        <el-tabs v-model="activeTab" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="密码登录" name="password" />  
          <el-tab-pane label="验证码登录" name="sms" /> 
        </el-tabs>

        <!-- 密码登录表单 -->
        <form
          v-show="activeTab === 'password'"
          class="space-y-6"
          @submit.prevent="handlePasswordLogin"
          style="height: 260px"
        >
          <div>
            <label class="sr-only" for="username">账号</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
                <i class="fas fa-user text-gray-400 text-lg"></i>
              </div>
              <input
                class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 text-lg"
                v-model="formData.username"
                placeholder="请输入账号"
                type="text"
                required
              />
            </div>
          </div>

          <div>
            <label class="sr-only" for="password">密码</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
                <i class="fas fa-lock text-gray-400 text-lg"></i>
              </div>
              <input
                class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 text-lg"
                v-model="formData.password"
                placeholder="请输入密码"
                type="password"
                required
              />
            </div>
          </div>

          <div class="flex items-center justify-between text-sm">
            <div class="flex items-center">
              <input
                class="h-5 w-5 text-primary focus:ring-primary border-gray-300 rounded"
                v-model="formData.rememberMe"
                type="checkbox"
                id="passwordRememberMe"
              />
              <label class="ml-3 text-gray-600" for="passwordRememberMe">记住登录状态</label>
            </div>
            <a
              class="font-medium text-primary hover:text-primaryHover transition-colors duration-200"
              href="javascript:void(0);"
            >
              忘记密码
            </a>
          </div>

          <button
            class="w-full bg-primary hover:bg-primaryHover text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] text-lg shadow-lg shadow-primary/20"
            type="submit"
            style="color: #fff; background-color: #97d715; text-align: center; cursor: pointer;border: none;"
          >
            登录
          </button>
        </form>

        <!-- 验证码登录表单 -->
        <form
          v-show="activeTab === 'sms'"
          class="space-y-6"
          @submit.prevent="handleSmsLogin"
          style="height: 260px"
        >
          <div>
            <label class="sr-only" for="smsPhone">手机号</label>
            <div class="relative">
              <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
                <i class="fas fa-mobile-alt text-gray-400 text-lg"></i>
              </div>
              <input
                class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 text-lg"
                v-model="smsFormData.phone"
                placeholder="请输入手机号"
                type="text"
                required
              />
            </div>
          </div>

          <div>
            <label class="sr-only" for="smsCode">验证码</label>
            <div class="relative flex">
              <div class="absolute inset-y-0 left-0 flex items-center pl-4 pointer-events-none">
                <i class="fas fa-sms text-gray-400 text-lg"></i>
              </div>
              <input
                class="w-full pl-12 pr-4 py-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary transition-all duration-200 text-lg"
                v-model="smsFormData.code"
                placeholder="请输入验证码"
                type="text"
                required
              />
              <div
                class="ml-3 px-5 py-4 bg-primary text-white rounded-lg hover:bg-primaryHover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 transition-all duration-200 whitespace-nowrap text-sm font-medium shadow-md shadow-primary/20"
                @click.prevent="getSmsCode"
                :disabled="isCountingDown"
                style="
                  color: #fff;
                  padding: 0 10px;
                  line-height: 60px;
                  height: 60px;
                  background-color: #97d715;
                  cursor: pointer;
                "
                :class="{ 'opacity-70 cursor-not-allowed': isCountingDown }"
                type="div"
              >
                {{ isCountingDown ? `重新获取 (${countdown}s)` : '获取验证码' }}
              </div>
            </div>
          </div>

          <div class="flex items-center justify-between text-sm">
            <div class="flex items-center">
              <input
                class="h-5 w-5 text-primary focus:ring-primary border-gray-300 rounded"
                v-model="smsFormData.rememberMe"
                type="checkbox"
                id="smsRememberMe"
              />
              <label class="ml-3 text-gray-600" for="smsRememberMe">记住登录状态</label>
            </div>
            <a
              class="font-medium text-primary hover:text-primaryHover transition-colors duration-200"
              href="javascript:void(0);"
            ></a>
          </div>

          <button
            class="w-full bg-primary hover:bg-primaryHover text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50 transition-all duration-200 transform hover:scale-[1.02] active:scale-[0.98] text-lg shadow-lg shadow-primary/20"
            type="submit"
            style="color: #fff; background-color: #97d715; text-align: center; cursor: pointer;border:none"
          >
            登录
          </button>
        </form>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { login } from '@/api/login' // 假设项目已有登录接口
import * as authUtil from '@/utils/auth'

// 状态管理
const router = useRouter()
const activeTab = ref('password') // 初始显示密码登录
const formData = ref({
  username: '',
  password: '',
  rememberMe: false,
  captchaVerification: ''
}) // 密码登录表单数据
const smsFormData = ref({
  phone: '',
  code: '',
  rememberMe: false
}) // 验证码登录表单数据
const isCountingDown = ref(false) // 验证码倒计时状态
const countdown = ref(60) // 倒计时秒数
const isLangDropdownOpen = ref(false) // 语言下拉菜单状态

// 语言配置（静态数据，可根据i18n扩展）
const langList = ref([
  { lang: 'zh', icon: '/images/CN.png', text: '中文' }, // 指向public/images目录
  { lang: 'en', icon: '/images/EN.png', text: 'English' },
  { lang: 'vi', icon: '/images/VI.png', text: 'Tiếng Việt' }
])
const currentLang = ref(langList.value[0]) // 默认中文

// Logo路径（public/images/11.png）
const logoUrl = ref('/images/11.png')

const handleClick=(item)=>{
  console.log(item);
}

// 语言切换逻辑
const switchLang = (lang: { lang: string; icon: string; text: string }) => {
  currentLang.value = lang
  document.documentElement.lang = lang.lang === 'zh' ? 'zh-CN' : lang.lang
  isLangDropdownOpen.value = false
}

// 验证码倒计时
const getSmsCode = () => {
  if (isCountingDown.value) return
  isCountingDown.value = true
  const timer = setInterval(() => {
    if (countdown.value <= 0) {
      clearInterval(timer)
      isCountingDown.value = false
      countdown.value = 60
    } else {
      countdown.value--
    }
  }, 1000)
}

// 密码登录提交
const handlePasswordLogin = async () => {
  try {
    const res = await login(formData.value) // 调用登录接口
    authUtil.setToken(res)
    router.push('/index') // 登录成功跳转
  } catch (error) {
    console.error('登录失败:', error)
  }
}

// 验证码登录提交（需根据接口调整）
const handleSmsLogin = async () => {
  try {
    // const res = await smsLogin(smsFormData.value)
    router.push('/index')
  } catch (error) {
    console.error('登录失败:', error)
  }
}
</script>

<style lang="scss" scoped>
body {
  position: relative;
  overflow: hidden;
}

/* 背景图样式（指向public/images/2.png） */
.background-image {
  position: absolute;
  inset: 0;
  background-image: url('/images/2.png');
  background-size: cover;
  background-position: center;
  z-index: 0;
}

/* 登录容器样式（与22.html一致） */
.login-container {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%) scale(0.7);
  width: 32%;
  max-width: 500px;
  min-height: 529px;
  max-height: 90vh;
  border-radius: 16px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  z-index: 20;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: white;
  overflow: hidden;
  transform-origin: center;
}

/* 顶部导航样式 */
.header-container {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 24px;
}

.amazon-logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.amazon-logo img {
  width: 32px;
  height: 32px;
}

/* 语言下拉菜单样式 */
.dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + -4px);
  background-color: #f9f9f9;
  min-width: 140px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  right: 0;
  border-radius: 4px;
  margin-top: 4px;

  &.block {
    display: block;
  }

  a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    transition: background-color 0.3s;
    align-items: center;

    &:hover {
      background-color: #f1f1f1;
    }
  }
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .login-container {
    right: 5%;
    width: 38%;
  }
}

@media (max-width: 1024px) {
  .login-container {
    width: 45%;
  }

  .header-container {
    gap: 16px;
  }

  .amazon-logo img {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 768px) {
  .login-container {
    right: 5%;
    left: 5%;
    width: auto;
    max-width: none;
    top: 55%;
    min-height: 560px;
  }

  .header-container {
    flex-direction: row;
    gap: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    top: 20px;
  }

  .amazon-logo img {
    width: 24px;
    height: 24px;
  }
}
</style>
